<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>18 vue自定义指令</title>
    </head>
    <body>
        <div id="box">
            <!-- 指定使用时一定要加v-xxx -->
            <div v-mydir="'red'">1111</div>
            <div v-mydir="myColor">2222</div>
            <div v-mydir="myStyle">3333</div>
        </div>

        <script>
            Vue.directive('mydir', {
                // 指令的生命周期--节点插入之后
                inserted(el, bind) {
                    if (bind.value.color) {
                        el.style.background = bind.value.color;
                        el.style.height = bind.value.height;
                    } else {
                        el.style.background = bind.value;
                    }
                },
                // 指令的生命周期--节点更新时
                update(el, bind) {
                    el.style.background = bind.value;
                }
            });

            const vm = new Vue({
                el: '#box',
                data() {
                    return {
                        myColor: 'yellow',
                        myStyle: {
                            color: 'blue',
                            height: '200px'
                        }
                    };
                }
            });
        </script>
    </body>
</html>
